//我的设置
import React, { Component } from 'react'
import {
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';

import { Csystem_Style as styles } from '../../../styles';
import { common_url, upLoading, fetchRequest } from "../../util/fetch";
import Modal from 'react-native-modal';
//图片选择器
import ImagePicker from 'react-native-image-crop-picker';

var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;

export default class Csystem_top extends Component {

    // 初始化模拟数据
    constructor(props) {            //构造器只执行一次
        super(props);
        this.state = {
            isModal: false
        }
    };

    state = {
        isModalVisible: false,
    }
    _showModal = () => this.setState({ isModalVisible: true })
    _hideModal = () => this.setState({ isModalVisible: false })

    render() {
        return (
            <View style={[styles.sysc_top, {
                width: width * 1,
                elevation: 5,
                shadowColor: 'black',
                shadowOpacity: 1,
                shadowRadius: 5
            }]}>

                <TouchableOpacity onPress={this._showModal}>
                    <Image source={
                        this.props.company.companyPicture ?
                            { uri: common_url + "uploadImg/" + this.props.company.companyPicture }
                            : require('../../img/app/company.png')} style={styles.sysc_head} />
                </TouchableOpacity>
                <Text style={styles.sysc_txtt}>{this.props.company.companyName}</Text>

                <TouchableOpacity activeOpacity={1} style={styles.sysc_o} onPress={() => {
                    this.props.navigation.navigate('Ccombasic_all', { company: this.props.company })
                }}>
                    <Text style={styles.sysc_txtt2}>点击编辑公司</Text>
                </TouchableOpacity>


                <Modal isVisible={this.state.isModalVisible}
                    animationIn={'slideInLeft'}
                    animationOut={'slideOutRight'}>
                    <View style={styles.modal_in}>
                        <View style={styles.modal_touch}>
                            <TouchableOpacity onPress={this.xiangc.bind(this)} style={styles.modal_but}>
                                <Text style={styles.modal_txt1}>图库</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.pais.bind(this)} style={styles.modal_but}>
                                <Text style={styles.modal_txt1}>拍摄</Text>
                            </TouchableOpacity>
                        </View>
                        <TouchableOpacity style={styles.modal_butb}>
                            <Text onPress={this._hideModal} style={styles.modal_yes}>取消</Text>
                        </TouchableOpacity>
                    </View>
                </Modal>

            </View>

        )
    }

    //相册选择
    xiangc() {
        ImagePicker.openPicker({
            width: 300,
            height: 400,
            cropping: true,
            cropperCircleOverlay: true
        }).then(image => {
            this.setState({
                avatarSource: { uri: image.path }
            });
            this._upload(image);
            this._hideModal()
        }).catch(e => {
            this._hideModal()
        });
    }

    //拍摄选择
    pais() {
        ImagePicker.openCamera({
            width: 300,
            height: 400,
            cropping: true,
            cropperCircleOverlay: true
        }).then(image => {
            this.setState({
                avatarSource: { uri: image.path }
            });
            this._upload(image);
            this._hideModal()
        }).catch(e => {
            this._hideModal()
        });
    }

    _upload(image) {
        upLoading("upload/img.go", image).then(
            e => {
                if (e.msg == "ok") {
                    fetchRequest("CompanyInfo/updateCompanyPictureMob.go", "POST", { imgName: e.imgName }).then(e => {
                        this.props.actions.SelCompanyMobAction();
                    });
                }
            }
        )
    }

}